import styles from './index.less';
import { Input, Select, Button, Tag, Space, Table, Breadcrumb } from 'antd';
import { useDispatch, useSelector } from 'umi';
import { UserModelState } from '@/models/user';
import { useEffect, useState } from 'react';
import CommonFooter from '@/components/CommonFooter';
export default function userList() {
  const { userList } = useSelector(
    (state: { user: UserModelState }) => state.user,
  );
  const { Option } = Select;
  const columns = [
    {
      title: '账户',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: (text: string) => {
        {
          text = text === 'visitor' ? '访客' : '管理员';
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text: string) => {
        {
          text = text === 'active' ? '可用' : '已锁定';
        }
        return <span>{text}</span>;
      },
    },
    {
      title: '注册日期',
      dataIndex: 'createAt',
      key: 'createAt',
      render: (text: any) => {
        var json_data = new Date(text).toJSON();
        return (
          <span>
            {new Date(new Date(json_data) + 8 * 3600 * 1000)
              .toISOString()
              .replace(/T/g, ' ')
              .replace(/\.[\d]{3}Z/, '')}
          </span>
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          {
            <Button
              type="link"
              onClick={async () => {
                // 深拷贝对象
                let obj = JSON.parse(JSON.stringify(record));

                // 切换状态
                obj.status = obj.status == 'active' ? 'locked' : 'active';

                // 调用仓库修改状态方法
                dispatch({
                  type: 'user/changeStatus',
                  payload: obj,
                });

                // 重新获取该页数据  刷新
                dispatch({
                  type: 'user/userList',
                  params: {
                    page: 1,
                    pageSize: 117,
                  },
                });
              }}
            >
              {record.status == 'locked' ? '启用' : '禁用'}
            </Button>
          }
          {
            <Button
              type="link"
              onClick={async () => {
                // 深拷贝对象
                let obj = JSON.parse(JSON.stringify(record));

                // 切换状态
                obj.role = obj.role == 'admin' ? 'visitor' : 'admin';

                // 调用仓库修改状态方法
                dispatch({
                  type: 'user/changeStatus',
                  payload: obj,
                });

                // 重新获取该页数据,刷新页面
                dispatch({
                  type: 'user/userList',
                  params: {
                    page: 1,
                    pageSize: 117,
                  },
                });
              }}
            >
              {record.role == 'visitor' ? '授权' : '解除授权'}
            </Button>
          }
        </Space>
      ),
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  let dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      
      type: 'user/userList',
    });
  }, []);

  const onSelectChange = (selectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;

  return (
    <div className={styles.user}>
      <div className={styles.top}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <a href="/">工作台</a>
          </Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <form className={styles.form}>
        账户:
        <Input placeholder="请输入用户账户"  className='Userinp'/>
        邮箱:
        <Input placeholder="请输入用户邮箱" />
        角色:
        <Select defaultValue="" >
          <Option value="Option1">管理员</Option>
          <Option value="Option2">访客</Option>
        </Select>
        状态:
        <Select defaultValue="">
          <Option value="Option1">锁定</Option>
          <Option value="Option2">可用</Option>
        </Select>
        <div className={styles.btns}>
          <Button
            type="primary"
            onClick={() => {
              const Userinp = document.getElementsByClassName('Userinp')[0].value;
              dispatch({
                type: 'user/usernameList',
                payload: Userinp
              });
            }}
          >
            搜索
          </Button>
          <Button>重置</Button>
        </div>
      </form>
      <div className={styles.list}>
        <div className="user_table_header">
          <div>
            {hasSelected ? (
              <div>
                <Button htmlType="button">启用</Button>
                <Button htmlType="button">禁用</Button>
                <Button htmlType="button">解除授权</Button>
                <Button htmlType="button">授权</Button>
              </div>
            ) : (
              ''
            )}
          </div>
        </div>
        <Table
          columns={columns}
          dataSource={userList}
          rowSelection={rowSelection}
        />
      </div>
      <CommonFooter />
    </div>
  );
}
